<template>
  <!--用户清单界面-->
  <div>
    <!--界面-->
    <el-dialog :title="dialogTitle"
               custom-class="dialog_style"
               :close-on-click-modal="false"
               :show-close="false"
               :modal-append-to-body="false"
               :visible.sync="openDialog">
      <el-form ref="eventCache"
               :rules="eventRules"
               :inline="true"
               :model="eventCache" label-width="80px">
        <el-form-item label="事件名称" prop="thingsName" class="inputName">
          <el-input v-model="eventCache.thingsName"
                    maxlength="12"
                    show-word-limit
                    placeholder="请填写事件名称(最多12个字)"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="事件类型" prop="thingsType" class="selectName">
          <el-autocomplete
              class="inline-input"
              v-model="eventCache.thingsType"
              :fetch-suggestions="querySearch"
              show-word-limit
              placeholder="请输入事件类型"
              @select="handleSelect">
            <template slot-scope="{ item }">
              <div class="name">{{ item }}</div>
            </template>
          </el-autocomplete>
          <el-tooltip class="item" effect="dark" content="可以自己添加新的事件类型哟～"
                      style="margin-left: 3%;"
                      placement="right">
            <i class="el-icon-warning-outline warningTitle"></i>
          </el-tooltip>
<!--          <el-select v-model="eventCache.thingsType" filterable placeholder="请选择">
            <el-option
                v-for="type in thingsTypes"
                :label="type"
                :value="type">
            </el-option>
          </el-select>-->
        </el-form-item>
        <br/>
        <el-form-item label="时间范围" prop="start">
          <el-date-picker
              v-model="eventCache.start"
              type="datetime"
              @change="startChange"
              :picker-options="pickerStart"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始日期时间">
          </el-date-picker>
        </el-form-item>
        &nbsp;-&nbsp;&nbsp;
        <el-form-item prop="end">
          <el-date-picker
              :disabled="eventCache.start === null || eventCache.start === ''"
              v-model="eventCache.end"
              type="datetime"
              @change="endChange"
              :picker-options="pickerEnd"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="eventCache.start"
              placeholder="选择结束日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="背景颜色" prop="backcolor" class="colorChoose">
          <el-color-picker v-model="eventCache.backcolor"></el-color-picker>
        </el-form-item>
        <el-form-item label="打卡颜色" prop="punchCardColor" class="colorChoose">
          <el-color-picker v-model="eventCache.punchCardColor"></el-color-picker>
        </el-form-item> <br/>
        <el-form-item label="邮箱通知"
                      v-if="this.$store.state.noteList.openSendEmail" class="mySwitch">
          <el-switch
              v-model="eventCache.isEmailStart"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="短信通知">
          <el-col :span="19">
            <el-switch
                :disabled="($store.state.noteList.openSendTel && !$store.state.userContext.userTel) || !haveResidue"
                v-model="eventCache.isTelStart"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-col>
          <el-col :span="4" v-if="$store.state.noteList.openSendTel && !$store.state.userContext.userTel">
            <el-tooltip class="item" effect="dark" content="您还没有绑定电话哟～绑定电话了再来试试吧" placement="right">
              <i class="el-icon-warning-outline warningTitle"></i>
            </el-tooltip>
          </el-col>

          <el-col :span="4" v-if="!haveResidue">
            <el-tooltip class="item" effect="dark" content="剩余短信发送数量不足" placement="right">
              <i class="el-icon-warning-outline warningTitle"></i>
            </el-tooltip>
          </el-col>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMethod">取 消</el-button>
        <el-button type="primary"
                   v-if="isInsert"
                   @click="insertMethod('eventCache')">确 定 添 加
        </el-button>
        <el-button type="primary"
                   v-else
                   @click="updateMethod(eventCache.id,'eventCache')">确 定 修 改
        </el-button>

      </div>
    </el-dialog>

    <!--日历界面-->
    <v-row class="appStyle fill-height">
      <v-col style="background-color: #ffffff00">
        <!--上部分选择月-->
        <v-sheet height="64" class="animate__animated animate__fadeInDown">
          <v-toolbar flat>
            <!--今天按钮-->
            <v-btn
                outlined
                class="mr-4"
                color="grey darken-2"
                @click="setToday">今天
            </v-btn>
            <!--上一级按钮-->
            <v-btn
                fab
                text
                small
                color="grey darken-2"
                @click="prev"
            >
              <i class="el-icon-arrow-left"></i>
            </v-btn>
            <!--当前日期-->
            <v-toolbar-title v-if="MyCalendar">
              {{ MyCalendar.title }}
            </v-toolbar-title>
            <!--下一级按钮-->
            <v-btn
                fab
                text
                small
                color="grey darken-2"
                @click="next"
            >
              <i class="el-icon-arrow-right"></i>
            </v-btn>
            <v-spacer></v-spacer>
            <v-menu
                bottom
                right
            >
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                    outlined
                    color="grey darken-2"
                    v-bind="attrs"
                    v-on="on"
                >
                  <span>{{ typeToLabel[type] }}</span>
                  <i class="el-icon-arrow-down"/>
                </v-btn>
              </template>
              <!--选择展示-->
              <v-list>
                <v-list-item @click="type = 'day'">
                  <v-list-item-title>天</v-list-item-title>
                </v-list-item>
                <v-list-item @click="type = 'week'">
                  <v-list-item-title>周</v-list-item-title>
                </v-list-item>
                <v-list-item @click="type = 'month'">
                  <v-list-item-title>月</v-list-item-title>
                </v-list-item>
                <v-list-item @click="type = '4day'">
                  <v-list-item-title>4 天</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </v-toolbar>
        </v-sheet>

        <v-sheet height="600" class="animate__animated animate__fadeInUp">
          <!--日历-->
          <v-calendar
              ref="calendar"
              v-model="focus"
              color="red lighten-4"
              event-text-color="black"
              locale="zhHans"
              :events="events"
              :event-color="getEventColor"
              :event-name="getEventName"
              :type="type"
              :weekdays="weekdays"
              @click:event="showEvent"
              @click:more="viewDay"
              @click:date="viewDay">
          </v-calendar>
          <v-menu
              v-model="selectedOpen"
              :close-on-content-click="false"
              :activator="selectedElement"
              offset-x
          >
            <!--修改界面-->

            <div class="MyCard">
              <div class="cardTop"
                   :style="{background:selectedEvent.backcolor}">
                <!--修改按钮-->
                <el-button class="updButton"
                           icon="el-icon-edit"
                           v-if="!selectedEvent.selectedOpen"
                           :disabled="updDisable(selectedEvent.index)"
                           type="text"
                           @click="updateList(selectedEvent.index)"
                           circle></el-button>
                <span class="cardTitle">{{ selectedEvent.thingsName }}</span>
                <!--打开按钮-->
                <el-button circle class="isOk"
                           @click="punchCard(selectedEvent.index)"
                           type="text"
                           v-if="!selectedEvent.selectedOpen && !selectedEvent.isPunchCard"
                           icon="el-icon-star-off"></el-button>
                <el-button circle class="isOk"
                           disabled
                           v-else
                           type="text"
                           :disabled="updDisable(selectedEvent.index)"
                           :style="{color: selectedEvent.punchCardColor}"
                           icon="el-icon-star-on"></el-button>
              </div>
              <div class="cardBottom">
                <el-button class="bottomBut"
                           @click="selectedOpen = false"
                           type="text">取消
                </el-button>
                <el-button class="bottomBut"
                           @click="deleteList(selectedEvent.index)"
                           type="text">删除
                </el-button>
              </div>
            </div>

          </v-menu>
        </v-sheet>
      </v-col>
    </v-row>

    <!--添加按钮-->
    <div class="addButton" @click="insertList">
      <i class="el-icon-plus"/>
    </div>
  </div>
</template>

<script>
import {DatePicker, TimePicker, Switch, Input, Form, ColorPicker, Popconfirm, Card, Button} from 'element-ui';
export default {
  name: "userNoteList",
  components: {
    DatePicker,
    TimePicker,
    Switch,
    Input,
    Form,
    ColorPicker,
    Popconfirm,
    Card,
    Button
  },
  data() {
    return {
      MyCalendar: null,
      dialogTitle: '修改清单',
      openDialog: false, //是否打开弹窗
      isUpdate: false, //是否打开修改界面
      isInsert: false, //添加事件
      isStartChange: false, //开始时间是否改变
      isEndChange: false, //结束时间是否改变
      focus: '',
      type: 'month',
      typeToLabel: {
        month: '月',
        week: '周',
        day: '天',
        '4day': '4 天',
      },
      weekdays: [1, 2, 3, 4, 5, 6, 0],
      selectedEvent: {},
      selectedElement: null,
      selectedOpen: false,
      events: [],  //用来存放清单
      eventCache: {
        index: '',  //下标
        backcolor: "",
        isEmailStart: false, //开去邮箱通知
        isPunchCard: false, //是否打卡签到
        isTelStart: false, //开启短信通知
        punchCardColor: "", ////打卡颜色
        start: "",
        end: "",
        thingsId: "",
        thingsName: "",
        timed: true,
        isSend: 0,
        thingsType: '',
      }, //用来存放添加的临时消息
      thingsTypes:[], //事件类型
      eventRules: {
        thingsName: [
          {required: true, message: '请输入事件名称', trigger: 'blur'},
        ],
        start: [
          {required: true, message: '请选择开始时间', trigger: 'blur'},
        ],
        end: [
          {required: true, message: '请选择结束时间', trigger: 'blur'},
        ],
        backcolor: [
          {required: true, message: '请选择事件背景颜色', trigger: 'blur'},
        ],
        punchCardColor: [
          {required: true, message: '请选择事件打卡颜色', trigger: 'blur'},
        ],
        thingsType:[
          {required: true, message: '请选择事件类型', trigger: 'blur'},
        ]
      },
      profile: {
        userid: '',
        userImg: '', //用户头像地址
        name: '', //用户昵称
        username: '', //用户账号
        userEmail: '', //用户邮箱
        userTel: '', //用户联系方式
        userRole: '', //用户角色
      },
      token: "",
      haveResidue: true, //判断用户是否还有短信剩余凉
      //时间选择
      pickerStart: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
          // let endDate = new Date().getTime() + 14 * 24 * 3600 * 1000;
          // return time.getTime() <=  Date.now() || time.getTime() > endDate ;
        },
        // selectableRange: (() => {
        //   let hour = data.getHours();
        //   let minute = data.getMinutes();
        //   let second = data.getSeconds();
        //   return [`${hour}:${minute}:${second} - 23:59:59`]
        // })(),
      },
      pickerEnd: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7;
        },
        selectableRange: (() => {

        })(),
      },
    }
  },
  mounted() {
    this.getThingsType();
    this.getUserContextByCookie();
    this.MyCalendar = this.$refs.calendar
    this.MyCalendar.checkChange()
  },
  methods: {
    //获取用户剩余短信数量
    getSMSResidue(userID){
      this.$axios({
        url: '/userNoteInfo/getTelResidue/' + userID,
        method: 'GET',
      }).then((response => {
        if (response.data.noteCode === 200) {
          // console.log(response.data);
          this.haveResidue = response.data.noteClass.profileNumber > 0;
        }
      }))
    },
    //类型搜索
    querySearch(queryString, cb) {
      let queryThings = this.thingsTypes;
      let results = queryString ? queryThings.filter(this.createFilter(queryString)) : queryThings;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.indexOf(queryString) === 0);
      };
    },
    //类型选择
    handleSelect(item) {
      this.eventCache.thingsType = item;
    },
    //获取事件类型
    getThingsType(){
      this.$axios({
        url: '/noteThings/queryThingsType',
        method: 'GET'
      }).then( response =>{
        if (response.data.noteCode === 200)
          this.thingsTypes = response.data.noteClass;
        this.restaurants = this.thingsTypes;
      }).catch( error =>{
        console.log(error);
      })
    },
    //获取COOKIE里面的用户对象
    getUserContextByCookie() {
      // if (document.cookie.length > 0) {
      //   // 通过分号(;)作为分割符cookie字符串
      //   let arr = document.cookie.split(";");
      //   for (let index = 0; index < arr.length; index++) {
      //     let items = arr[index].split("=");
      //     if (items.length > 2) {
      //       let temp = arr[index].split(items[1])
      //       items[1] = items[1] + temp[1];
      //     }
      //     if (items[0].replace(/\s*/g, "") === "userid") {
      //       this.profile.userid = items[1]
      //     } else if (items[0].replace(/\s*/g, "") === "userImg") {
      //       this.profile.userImg = items[1]
      //     } else if (items[0].replace(/\s*/g, "") === "name") {
      //       this.profile.name = items[1]
      //     } else if (items[0].replace(/\s*/g, "") === "username") {
      //       this.profile.username = items[1]
      //     } else if (items[0].replace(/\s*/g, "") === "userEmail") {
      //       this.profile.userEmail = items[1]
      //     } else if (items[0].replace(/\s*/g, "") === "userTel") {
      //       this.profile.userTel = items[1]
      //     } else if (items[0].replace(/\s*/g, "") === "userRole") {
      //       this.profile.userRole = items[1]
      //     }
      //   }
      //   this.$store.commit("setUserContext", this.profile) //提交到全局
      // }
      if (document.cookie.length > 0) {
        // 通过分号(;)作为分割符cookie字符串
        let arr = document.cookie.split(";");
        for (let index = 0; index < arr.length; index++) {
          let items = arr[index].split("=");
          if (items.length > 2) {
            let temp = arr[index].split(items[1])
            items[1] = items[1] + temp[1];
          }
          if (items[0].replace(/\s*/g, "") === "token") {
            this.token = items[1]
          }
        }
        this.$store.commit("setToken", this.token) //提交到全局
      }
      this.$axios({
        url: '/noteUser/queryUserByToken/' + this.$store.state.token,
      }).then(response => {
        this.$store.commit("setUserContext",response.data)
        //根据用户编号判断用户是否存在
        if (this.$store.state.userContext.userid === ''){
          this.$message.error("请先登陆...")
          this.$router.push("/login");
        }else{
          this.elMenuOptions = this.$store.state.elMenuOptions
          this.inputEmail = this.$store.state.userContext.userEmail
          if (this.$store.state.userContext.userid !== '') {
            this.getUserThings(this.$store.state.userContext.userid); //获取用户事件
            this.getSMSResidue(this.$store.state.userContext.userid);//获取用户短信剩余凉
          }
        }
      })

    },
    //获取用户事件
    getUserThings(userID) {
      this.$axios({
        url: '/userThings/queryUserThings/' + userID,
        method: 'GET',
      }).then(response => {
        // console.log("获取用户事件", response.data);
        if (response.data.noteCode === 200) {
          let things = response.data.noteClass;
          //数据格式化
          for (let index = 0; index < things.length; index++) {
            let thing = {
              index: index,  //下标
              backcolor: things[index].backcolor,
              isEmailStart: things[index].isEmailStart === 1 ? true : false, //开去邮箱通知
              isPunchCard: things[index].isPunchCard === 1 ? true : false, //是否打卡签到
              isTelStart: things[index].isTelStart === 1 ? true : false, //开启短信通知
              punchCardColor: things[index].punchCardColor, ////打卡颜色
              start: new Date(things[index].startTime),
              end: new Date(things[index].endTime),
              thingsId: things[index].thingsId,
              thingsName: things[index].thingsName,
              isSend: things[index].isSend,
              thingsType: things[index].thingsType,
              timed: true,
            }
            this.events.push(thing)
          }
        }
      }).catch(error => {
        console.log(error);
      })
    },
    //打开添加窗口
    insertList() {
      this.getThingsType();
      this.dialogTitle = "添加清单";  //修改弹窗标题
      this.openDialog = !this.openDialog //打开添加窗口
      this.isInsert = !this.isInsert;  //修改当前为添加
      this.selectedOpen = false; //关闭选择窗口
    },
    //添加操作
    insertMethod(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //判断时间是否正常输入
          if (this.checkTime()){
            let insertThingsData = this.$qs.stringify({
              thingsName: this.eventCache.thingsName,
              punchCardColor: this.eventCache.punchCardColor,
              backcolor: this.eventCache.backcolor,
              isPunchCard: 0,
              isEmailStart: this.eventCache.isEmailStart ? 1 : 0,
              isTelStart: this.eventCache.isTelStart ? 1 : 0,
              start: this.eventCache.start,
              end: this.eventCache.end,
              uid: this.$store.state.userContext.userid,
              thingsType: this.eventCache.thingsType
            });
            this.$axios({
              url: '/userThings/insertThings',
              method: 'POST',
              data: insertThingsData,
            }).then(response => {
              if (response.data.noteCode === 200) {
                this.$message({
                  message: response.data.noteMessage,
                  type: 'success'
                });
                this.eventCache.thingsId = response.data.noteClass.thingsId
                this.events.push(this.eventCache); //添加到集合中去
                this.openDialog = !this.openDialog //关闭窗口
                this.isInsert = !this.isInsert;  //关闭添加操作
                //给数组下标从新复制
                this.giveIndex();
                this.cacheReMake();
              } else {
                this.$message.error(response.data.noteMessage)
              }
            }).catch(error => {
              this.$message.error("请求超时...")
            })
          }else{
            return false;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //打开更新清单
    updateList(index) {
      this.getThingsType();
      this.isUpdate = !this.isUpdate
      this.eventCache = this.events[index];  //将要修改的数据添加到缓存中
      this.dialogTitle = "修改清单";  //修改弹窗标题
      this.openDialog = !this.openDialog
      this.selectedOpen = false; //关闭选择窗口
    },
    //更新操作
    updateMethod(index, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.checkTime()){
            let insertThingsData = this.$qs.stringify({
              thingsId: this.eventCache.thingsId,
              thingsName: this.eventCache.thingsName,
              punchCardColor: this.eventCache.punchCardColor,
              backcolor: this.eventCache.backcolor,
              isPunchCard: 0,
              isEmailStart: this.eventCache.isEmailStart ? 1 : 0,
              isTelStart: this.eventCache.isTelStart ? 1 : 0,
              start: this.eventCache.start,
              end: this.eventCache.end,
              uid: this.$store.state.userContext.userid,
              isStart: this.isStartChange,
              isEnd: this.isEndChange,
              isSend: this.eventCache.isSend,
              thingsType: this.eventCache.thingsType
            });
            this.$axios({
              url: '/noteThings/updateThings',
              method: 'PUT',
              data: insertThingsData,
            }).then(response => {
              if (response.data.noteCode === 200) {
                this.$message({
                  message: response.data.noteMessage,
                  type: 'success'
                });
                this.events[index] = this.eventCache;
                this.openDialog = !this.openDialog //关闭窗口
                this.isUpdate = !this.isUpdate;  //关闭更新操作
                this.cacheReMake();
              } else {
                this.$message.error(response.data.noteMessage)
              }
            }).catch(error => {
              this.$message.error("请求超时...")
            })
          }else{
            return false;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    //取消方法
    cancelMethod() {
      this.isInsert = false
      this.isUpdate = false
      this.openDialog = !this.openDialog
      this.cacheReMake();
    },
    //打卡签到
    punchCard(index) {
      let punData = this.$qs.stringify({
        thingsID: this.events[index].thingsId
      })
      this.$axios({
        url: '/noteThings/punchCard',
        method: 'PUT',
        data: punData
      }).then(response => {
        if (response.data.noteCode === 200) {
          this.events[index].isPunchCard = !this.events[index].isPunchCard;
          this.$message({
            message: '打卡成功',
            type: 'success'
          });
        } else {
          this.$message.error(response.data.noteMessage);
        }
      }).catch(error => {
        this.$message.error("请求超时...")
      })

    },
    //删除清单
    deleteList(index) {
      this.$confirm('此操作将删除改清单, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: '/userThings/deleteThings/' + this.events[index].thingsId,
          method: 'DELETE',
        }).then(response => {
          if (response.data.noteCode === 200) {
            this.$message({
              type: "success",
              message: response.data.noteMessage
            })
            this.events.splice(index, 1);
            //给数组下标从新复制
            this.giveIndex();
          } else {
            this.$message.error(response.data.noteMessage)
          }
        }).catch(error => {
          this.$message.error('请求超时')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //开始时间改变
    startChange() {
      this.isStartChange = true

      if (this.eventCache.start === '' || this.eventCache.start === null)
        this.eventCache.end = ''
      else{
        this.eventCache.end = ''
        this.pickerEnd.disabledDate = (time) => {
          const dateTime = new Date(this.eventCache.start)
          const startDateTime = dateTime.setDate(dateTime.getDate()-1)
          return (
              time.getTime() < new Date(startDateTime).getTime()
          )
        }
      }

    },
    //结束时间改变
    endChange() {
      this.isEndChange = true;
    },
    //缓存还原
    cacheReMake() {
      this.eventCache = {
        index: '',  //下标
        backcolor: "",
        isEmailStart: false, //开去邮箱通知
        isPunchCard: false, //是否打卡签到
        isTelStart: false, //开启短信通知
        punchCardColor: "", ////打卡颜色
        start: "",
        end: "",
        thingsId: "",
        thingsName: "",
        timed: true,
        isSend: 0,
        thingsType: '',
      }
    },
    //数组给下标赋值
    giveIndex() {
      for (let index = 0; index < this.events.length; index++) {
        this.events[index].index = index;
      }
    },
    //打开当前这天
    viewDay({date}) {
      this.focus = date
      this.type = 'day'
    },
    //获取颜色
    getEventColor(event) {
      return event.backcolor
    },
    //获取名称
    getEventName(event) {
      return event.input.thingsName
    },
    setToday() {
      this.focus = ''
    },
    prev() {
      this.$refs.calendar.prev()
    },
    next() {
      this.$refs.calendar.next()
    },
    showEvent({nativeEvent, event}) {
      const open = () => {
        this.selectedEvent = event
        this.selectedElement = nativeEvent.target
        requestAnimationFrame(() => requestAnimationFrame(() => this.selectedOpen = true))
      }

      if (this.selectedOpen) {
        this.selectedOpen = false
        requestAnimationFrame(() => requestAnimationFrame(() => open()))
      } else {
        open()
      }

      nativeEvent.stopPropagation()
    },
    //更新按钮是否可点击
    updDisable(index) {
      if (this.events[index] !== undefined)
        return this.events[index].start < new Date()
    },
    //时间校验
    checkTime(){
      if (this.eventCache.start === ''){
        this.$message.error("开始时间不能为空")
        return false
      }
      if (this.eventCache.end === ''){
        this.$message.error("结束时间不能为空")
        return false
      }
      let startTime =  new Date(this.eventCache.start).getTime();
      let endTime = new Date(this.eventCache.end).getTime();
      let noteTime = new Date().getTime();
      if (noteTime>startTime){
        this.$message.error("开始时间不能早于现在时间")
        return false
      }
      if (startTime>endTime){
        this.$message.error("结束时间不能早于开始时间")
        return false;
      }
      if (startTime === endTime){
        this.$message.error("结束时间不能等于开始时间")
        return false;
      }
      return true;
    }
  },
}
</script>

<style scoped>
.appStyle {
  max-width: 95%;
  height: 100%;
  background: #ffffff00;
}

.dialog_style {
  border-radius: 10px;
}

.addButton {
  width: 40px;
  height: 40px;
  background-color: #ffcdd2 !important;
  position: fixed;
  bottom: 8%;
  right: 4%;
  border-radius: 50px;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
  font-weight: bolder;
  color: #ffffff;
}

.MyCard {
  width: 100%;
  min-width: 300px;
  background-color: white;
}

.cardTop {
  width: 100%;
  height: 50px;
}

.updButton {
  margin-top: 2px;
  margin-left: 10px;
  font-size: 20px;
  float: left;
}

.cardTitle {
  font-size: 18px;
  color: #303133;
  display: block;
  float: left;
  margin-left: 20px;
  line-height: 50px;
}

.isOk {
  float: right;
  margin-right: 20px;
  font-size: 20px;
  margin-top: 2px;
}

.cardBottom {
  width: 100%;
}

.bottomBut {
  margin: 30px 20px 10px;
}

/*警告样式*/
.warningTitle {
  font-size: 20px;
  margin-top: 12px;
}
.el-form-item__content{
  width: 100%;
}
.dialog_style{
  border-radius: 30px;
}
.text{
  width: 60%;
  height: 100px;
  background-color: #ffcdd2;
}
.inputName{
  width: 70%;
}
.inputName>>>.el-form-item__content{
  width: 80%;
}
.selectName{
  width: 90%;
}
.selectName>>>.el-form-item__content{
  width: 80%;
}
.colorChoose{
  width: 40%;
}
.colorChoose>>>.el-form-item__content{
  width: 50%;
}
.mySwitch{
  width: 40%;
}
.zhujie{
  margin-left: 28px;
  font-size: 14px;
  text-indent: 48px;
  color: #909399;
}
</style>
